import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter,
    ScrollView
} from 'react-native';

import Constant from '../Constant/Constant'
import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import EncryptUtils from '../Utils/EncryptUtils'
import RouterUtils from '../Utils/RouterUtils'
import StorageUtils from '../Utils/StorageUtils'
import TimeUtils from '../Utils/TimeUtils'

export default class PageTypeSmallSelect extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '选择小类',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (<Text></Text>),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            categoryOneCode: this.props.navigation.state.params.categoryOneCode,
            smllTypeDatas: [],
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('PageTypeSmallSelect', this.props.navigation.state.key);
        this.selectTwoCategory();
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('PageTypeSmallSelect', this.props.navigation.state.key);
    }

    selectTwoCategory()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.selectTwoCategory + '/' + this.state.categoryOneCode, session, function (resultcode, data)
                    {
                        that.setState({
                            smllTypeDatas: data
                        })
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    callBack(name)
    {
        this.props.navigation.state.params.callback(name)
        this.props.navigation.goBack();
    }

    renderSmallType()
    {
        let allData = [];
        for (let i = 0; i < this.state.smllTypeDatas.length; i++)
        {
            let item = this.state.smllTypeDatas[i];
            allData.push(
                <TouchableOpacity key={item.id} onPress={() => this.callBack(item.categoryTwoName + '-' + item.categoryTwoCode)}>
                    <View style={{height: 50, padding: 16}}>
                        <Text style={{fontSize: ScreenUtils.Font_16, color: ColorUtils.black}}>{item.categoryTwoName}</Text>
                    </View>
                    <View style={{width: ScreenUtils.width, height: 1, marginLeft: 40, backgroundColor: ColorUtils.line}}/>
                </TouchableOpacity>
            );
        }
        return allData
    }

    render()
    {
        return (
            <ScrollView style={styles.container}>
                {this.renderSmallType()}
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
});


